<template>
	<div class="wrap">
		<v-carousel :list="list" :wpTitle="carTitle"></v-carousel>
      <div class="contact_box">
         <div class="subTitle">
            <p>{{contacts.title}}</p>
            <span>{{contacts.subTitle}}</span>
         </div>
         <div class="info">
            <p v-html="contacts.content"></p>
         </div>
         <div class="map">
            <a href="http://map.baidu.com/?latlng=31.235929,121.480539&title=上海&content=上海&autoOpen=true&l">
               <img src="../assets/map.png">
            </a>
         </div>
         <div class="book">
            <strong>给我们留言：</strong>
            <form action="{:iurl('post,setok','id=$id&module_id=23')}" method="post">
               <input type="text" name="name" placeholder="您的姓名" />
               <input type="text" name="tel" placeholder="联系电话" />
               <input type="email" name="email" placeholder="联系邮箱" />
               <input type="text" name="gs" placeholder="公司名" />
               <textarea placeholder="留言内容" name="content"></textarea>
               <input type="submit" name="submit" />
            </form>
         </div>
      </div>
	</div>
</template>

<script>
import vCarousel from './components/carousel'
export default {
   	data() {
      	return {
			   list: [],
            carTitle: 'CONTACT',
            contacts: {
               title: '塑身瑜伽馆',
               subTitle: 'Yoga gym',
               content: ''
            },
      	}
   	},
      components: {
         vCarousel
      },
      mounted (){
         let _this = this;

         // ajax获取数据
         this.ajax('?c=msg&ts=contactus&wxapp_skin=', function (res){
            _this.contacts.content = res.data.data.content;
            _this.carTitle = res.data.data.title;
            _this.list = _this.$store.getters.getCar;
         });


      }
}
</script>

<style scoped>
   .contact_box{padding:0 .05rem;}
   .contact_box .subTitle{margin:.15rem 0 .2rem; text-align:center;}
   .contact_box .subTitle p{font-size: .16rem;}
   .contact_box .subTitle span{font-size: .14rem;}
   .contact_box .map{width:100%; margin:.2rem 0;}
   .contact_box .map img{width: 100%;}
   .contact_box .book{overflow: hidden; margin-bottom: .3rem;}
   .contact_box .book form{margin-top: .3rem;}
   .contact_box form input,.contact_box form textarea{width:99.5%; height: .34rem; line-height: .34rem; border:1px solid #36c8ff; background: #6cc; font-size: .12rem; -webkit-border-radius: 50px; -ms-border-radius: 50px; -o-border-radius: 50px; border-radius: 50px; margin-bottom: .12rem; text-indent: .15rem; color: #fff;}
   .contact_box form textarea{height: .72rem; border-radius: .17rem;}
   .contact_box form input[type='submit']{text-indent: 0; color: #fff;}
   .contact_box form input:focus, .contact_box form textarea:focus{-webkit-outline:none; -o-outline:none; -ms-outline:none; outline:none;}
   input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
       color:#fff;
   }
   input:-o-placeholder, textarea:-o-placeholder { 
       color:#fff;
   }
   input::-moz-placeholder, textarea::-moz-placeholder { 
       color:#fff;
   }
   input:-ms-input-placeholder, textarea:-ms-input-placeholder { 
       color:#fff;
   }
</style>